<template>
	<view class="comment-item">
		<view class="avatar">
			<u-avatar :src="giveAvatar(item)" size="26"></u-avatar>
		</view>

		<view class="wrap">
			<view class="username">
				{{giveName(item)}}
				<text v-if="showCloseBtn && !closeBtn" class="iconfont icon-a-43-guanbi"
					@click.stop="delComment"></text>
			</view>
			<!-- <view class="comment-content">{{item.comment_content}}</view> -->
			<view class="comment-content">
				<!-- :shadowStyle="shadowStyle" -->
				<u-read-more ref="uReadMore" :showHeight="120" :toggle="true" textIndent="0">
					<u-parse :content="item.comment_content" @load="load"></u-parse>
				</u-read-more>
			</view>
			<view class="info">
				<view class="reply-btn" v-if="!childState">{{item.totalReply || ''}}回复 </view>
				<view>
					<uni-dateformat :date="item.comment_date" :threshold="[60000,3600000*24*30]">
					</uni-dateformat>
				</view>
				<view>{{item.province}}</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		giveName,
		giveAvatar
	} from "@/utils/tools.js"
	const db = uniCloud.database();
	const utilsObj = uniCloud.importObject("utilsObj", {
		customUI: true
	});

	export default {
		name: "CommentItem",
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			childState: {
				type: Boolean,
				default: false
			},
			closeBtn: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "-30rpx"
				}
			};
		},
		computed: {
			showCloseBtn() {
				let uid = uniCloud.getCurrentUserInfo().uid
				if (uid == this.item.user_id[0]._id || uid == this.item.reply_user_id[0]?._id || this.uniIDHasRole(
						'admin') || this.uniIDHasRole('webmaster')) {
					return true
				} else {
					return false
				}
			},
		},
		methods: {
			giveName,
			giveAvatar,
			load() {
				this.$nextTick(() => {
					this.$refs.uReadMore.init();
				})
				// this.$refs.uReadMore.init();
			},
			// 评论删除确认弹窗
			delComment() {
				let uid = uniCloud.getCurrentUserInfo().uid
				if (uid == this.item.user_id[0]._id || uid == this.item.reply_user_id[0]?._id || this.uniIDHasRole(
						'admin') || this.uniIDHasRole(
						'webmaster')) {
					uni.showModal({
						title: "是否确认删除",
						success: res => {
							if (res.confirm) {
								this.removeComment();
							}
						}
					})
					return;
				}
				uni.showToast({
					title: "权限不够",
					icon: "error"
				})
			},
			// 删除评论
			removeComment() {
				db.collection("cloud_fishCircle-comments").doc(this.item._id).remove()
					.then(res => {
						uni.showToast({
							title: "删除成功"
						})
						this.$emit("removeEnv", {
							id: this.item._id
						})
						if (this.item.comment_count > 0) {
							utilsObj.operation("cloud_fishCircle-article", "comment_count", this.commentObj
								.article_id,
								-1)
						}
					})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.comment-item {
		display: flex;

		.wrap {
			flex: 1;
			width: 85vw;
			padding-left: 20rpx;
			padding-bottom: 20rpx;

			.username {
				font-size: 26rpx;
				color: #666;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.iconfont {
					font-size: 20rpx;
					padding: 10rpx;
					color: #999;
				}
			}

			.comment-content {
				width: 90%;
				overflow-wrap: break-word;
				font-size: 34rpx;
				color: #111;
				line-height: 1.8em;
			}

			.info {
				font-size: 26rpx;
				color: #666;
				display: flex;
				padding: 10rpx 0;
				align-items: center;

				view {
					margin-right: 25rpx;
				}

				.reply-btn {
					padding: 6rpx 18rpx;
					background: #e4e4e4;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>